<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>播客App原型</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    body {
      background-color: #f4f4f4;
    }
    iframe {
      width: 390px; /* iPhone 15 Pro 宽度 */
      height: 844px; /* iPhone 15 Pro 高度 */
      border: none;
      border-radius: 20px; /* 圆角化 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="app1" class="flex justify-center items-center h-screen">
    <iframe id="myFrame1" src="home.html"></iframe>
  </div>
  <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-md p-4 flex justify-around">
    <a href="#" onclick="changePage(1)" class="text-gray-600 hover:text-gray-900">
      <i class="fa fa-home"></i>
      <span class="block text-xs">首页</span>
    </a>
    <a href="#" onclick="changePage(2)" class="text-gray-600 hover:text-gray-900">
      <i class="fa fa-play"></i>
      <span class="block text-xs">播放</span>
    </a>
    <a href="#" onclick="changePage(3)" class="text-gray-600 hover:text-gray-900">
      <i class="fa fa-user"></i>
      <span class="block text-xs">个人资料</span>
    </a>
    <a href="#" onclick="changePage(4)" class="text-gray-600 hover:text-gray-900">
      <i class="fa fa-cog"></i>
      <span class="block text-xs">设置</span>
    </a>
  </nav>
  <!-- <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
  <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script> -->
  <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
  <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
  <!-- <script src="kit.js"></script> -->
  <script type="text/javascript">
    //responsiveVoice.speak('你好，世界！', 'Chinese Female'); // 使用中文女声朗读

    const iframe = document.getElementById('myFrame1'); 
    function changePage(e){
      console.log("changePage-=>",e);
// iframe.contentWindow.postMessage('Hello from parent', 'home.html');
      var src1 = ''
      if(e==1){
        src1 = 'home.html'
      }else if(e==2){
        src1 = 'player.html'
      }else if(e==3){
        src1 = 'profile.html'
      }else if(e==4){
        src1 = 'settings.html'
      }

      iframe.src = src1;
    }

/**/
    window.addEventListener('message', function(event) { 
        if (event.origin !== 'http://localhost:88/') {
            return; // 验证消息来源的安全性 
        } 
        console.log('Message from iframe:', event.data); 
    }); 


    (()=>{
      console.log("index page start")

      
      var data1 = {'aaa':'bbb'}
      $.ajax({
        type:'GET',
        url:'test3.php',
        data:data1,
        success:function(res){
          console.log(res);
        },
        timeout:2000,
        error:function(e){
          console.log(e);
        }
      })

      initialUser();

    })()

function genID(length){
   return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
}

function getUuid () {
  var s = [];
  var hexDigits = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
  for (var i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
  }
  s[14] = "4"
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
  s[8] = s[13] = s[18] = s[23] = "-"
  let uuid = s.join("")
  return uuid
}

function initialUser(){
  console.log("initialUser()")
  var user_id1 = '';
  let userId = localStorage.getItem("userId")

  if(userId == '' || userId== null || userId == undefined){
    user_id1 = getUuid()
    console.log("user_id1-=>",user_id1)
    localStorage.setItem("userId",user_id1)
    userId = user_id1;
  }else{
    console.log("userId-=>",userId)
  }

  $.ajax({
    type:'GET',
    url:'./index1.php',
    data:{"userId":userId},
    success:function(res){
      console.log(res);
      var json1 = JSON.parse(res);
      console.log("json1-=>",json1);
      var obj1 = json1[0];
      console.log("obj1-=>",obj1);
      sessionStorage.setItem("user_id",obj1.id);
      sessionStorage.setItem("user_uId",obj1.uId);
      sessionStorage.setItem("dingy",obj1.dingy);
      sessionStorage.setItem("souc",obj1.souc);
      sessionStorage.setItem("level",obj1.level);
    },
    timeout:2000,
    error:function(e){
      console.log(e);
    }    
  })


}

/*
    new Vue({
      el: '#app1',
    })
*/
  </script>
</body>
</html>